<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <!--1.选择要添加样式的元素，这个选择得元素就叫：选择器-->
<!--  <style>-->
<!--    /*footer 叫元素选择器*/-->
<!--    footer {-->
<!--      color: red;-->
<!--      border: 3px solid green;-->
<!--    }-->

<!--    #article {-->
<!--      color: red;-->
<!--      border: 3px solid green;-->
<!--    }-->

<!--  </style>-->

  <!--外部样式的引入-->
  <link rel="stylesheet" href="./01.css">

  <style>
    h3{
      color: blue;
    }
  </style>


</head>
<body>
  <!--一个页面，大致是可以分为三大区域-->
  <!--内联样式-->
  <div style="color: blue">头部</div>
  <div style="border: 1px solid red">体部</div>
  <div>脚部</div>
  <hr>
  <!--html5 之后增加了分区元素-->
  <header>头部</header>
  <article id="article">体部</article>
  <footer  id="footer">脚步</footer>



  <h3 style="color:red">测试优先级</h3>

</body>
</html>